<template>
    <div class="wrap" :class="{ isPosition: !text }">
        <span class="wrap-button" @click="handCLick">{{ text }}</span>
        <a-modal wrapClassName="modalWrapClass" :title="text || record.name" :visible="visible" :footer="null"
            width="700px" :maskClosable="false" :afterClose="afterClose" @cancel="cancel"
            :bodyStyle="{ padding: '8px 10px' }">
            <div class="modalContent">
                <AnalyTable :dataList="record.child || []" :scroll="{ y: 'calc(65vh - 56px )' }"
                    type="AnalysisLookColum"></AnalyTable>
            </div>
        </a-modal>
    </div>
</template>
<script>
const AnalyTable = () => import('./AnalyTable')

export default {
    name: 'AnTableBtn',
    components: {
        AnalyTable,
    },
    props: {
        text: {
            type: String,
        },
        record: {
            type: Object,
        },
        isVisible: {
            type: Boolean,
            default: false,
        },
        onCallBack: {
            type: Function,
            default: () => { }
        },
    },
    data() {
        return {
            visible: false,
        }
    },
    mounted() {

    },
    methods: {
        handCLick() {
            this.visible = true;
        },
        afterClose() { },
        cancel() {
            this.visible = false;
            if (typeof (this.onCallBack) == 'function') {
                this.onCallBack();
            }
        }
    },
    watch: {
        isVisible: {
            handler(nVal, oVal) {
                if (nVal) {
                    this.handCLick();
                }
            },
            immediate: true,
        }
    }
}
</script>
<style lang="less" scoped>
.wrap {
    width: 100%;
    height: 100%;

    &-button {
        color: #1890ff;
        cursor: pointer;
    }
}
.isPosition{
    width: 0px;
    height: 0px;
}
.modalWrapClass {

    .modalContent {
        max-height: 65vh;
        height: 100%;
    }
}
</style>